<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>
        Office
    </title>
    <script src="https://yastatic.net/jquery/3.1.0/jquery.min.js">
    </script>
    <script src="https://yastatic.net/underscore/1.8.3/underscore-min.js">
    </script>
    <script src="https://yastatic.net/backbone/1.2.3/backbone-min.js">
    </script>
    <script src="models/ModelEmployee.js">
    </script>
    <script src="views/ViewOffice.js">
    </script>
    <script src="views/ViewEmployee.js">
    </script>
</head>
<body>
<div id="office">
</div>
<script src="main.js">
</script>
<script id="viewEmployee" type="text/template">
    <td class="empId"><%- idd %></td>
    <td class="empName" contenteditable="true"><%- name %></td>
    <td>
        <select class="empPosition" name="empPosition">
            <option value="default">
                not selected
            </option>
            <option value="developer">
                developer
            </option>
            <option value="designer">
                designer
            </option>
            <option value="tester">
                tester
            </option>
            <option value="manager">
                manager
            </option>
        </select>
    </td>
    <td>
        <button class="changeRate" value="-50">-</button>
        <input class="empRate" type="number" value="<%- rate %>">
        <button class="changeRate" value="50">+</button>
    </td>
    <td>
        <input class="empExpierence" type="number" value="<%- expierence %>">
    </td>
    <td class="empRank"><%- rank %></td>
    <td>
        <button class="dismissEmp">
            <b>
                dismiss
            </b>
        </button>
    </td>
</script>
<script id="viewOffice" type="text/template">
    <h1>
        OFFICE MANAGER APPLICATION
    </h1>
    <div class="actions">
        <button class="addEmployee">
            New Employee
        </button>
        <button class="getAllEmployeesInJSON">
            JSON Dump
        </button>
    </div>
    <div class="employeesSection">
        <table>
            <thead>
            <th data-sort="id">
                #
            </th>
            <th data-sort="name">
                Name
            </th>
            <th data-sort="position">
                Position
            </th>
            <th data-sort="rate">
                Rate
            </th>
            <th data-sort="expierence">
                Years in company
            </th>
            <th data-sort="rank">
                Rank
            </th>
            <th>
                Actions
            </th>
            </thead>
            <tbody class="employeesList">
            </tbody>
        </table>
    </div>
    <div class="officeTotalInfo">
        Total employees: <span class="empsCount">0</span>
        To pay per month total: <span class="toPay">0</span>
    </div>
    <pre class="JSON-dump"></pre>
</script>
</body>
</html>
